<!DOCTYPE html>
<html lang="en" >
<head>

<title>Vitess</title>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="./app.css"/>

</head>

<body ng-app="vtctld" layout="row" ng-controller="AppCtrl as app">

<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
            md-component-id="left"
            md-is-locked-open="$mdMedia('gt-md')">

  <md-toolbar class="md-whiteframe-z1">
    <h1>Vitess</h1>
  </md-toolbar>

  <md-list>
    <md-list-item ng-repeat="route in routes | filter:{showInNav:true}">
      <md-button ng-class="{ 'selected': navIsSelected(route) }" ng-href="#{{route.urlBase}}">
        <md-icon md-font-set="material-icons" ng-bind="route.icon"></md-icon>
        {{route.title}}
      </md-button>
    </md-list-item>
  </md-list>

</md-sidenav>

<div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">

  <md-toolbar layout="row" class="md-whiteframe-z1" layout-align="space-between center">
    <md-button class="md-icon-button" hide-gt-md ng-click="toggleNav()" aria-label="Toggle Nav Bar">
      <md-icon md-font-set="material-icons">menu</md-icon>
    </md-button>

    <h1 ng-bind="navTitle()"></h1>

    <md-button class="md-icon-button" ng-click="refreshRoute()" aria-label="Refresh">
      <md-tooltip>Refresh</md-tooltip>
      <md-icon md-font-set="material-icons">refresh</md-icon>
    </md-button>

    <md-button class="md-icon-button" aria-label="New UI" href="/app2">
      <md-tooltip>New UI</md-tooltip>
      <md-icon md-font-set="material-icons">trending_up</md-icon>
    </md-button>
  </md-toolbar>

  <div flex layout="column" id="content" ng-view></div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

<script src="./config.js"></script>
<script src="./app.js"></script>
<script src="./api.js"></script>
<script src="./keyspaces.js"></script>
<script src="./shard.js"></script>
<script src="./topo.js"></script>
<script src="./actions.js"></script>
<script src="./schema.js"></script>

</body>
</html>
